/**
 * BottomCard
 * @author: muisuidaan
 */

import styled from "styled-components";
import icon_circle_black from "@/assets/icons/icon-circle-black.png";

const Content = ({ className, style, children,info,table }) => (
  <div className={className} style={style}>
    {table}
    {info===null?null:<><p className="title">页面说明文案：</p>
    <div dangerouslySetInnerHTML={{ __html: info }}></div></>}
  </div>
);

// /解释说明文案
export const BottomCard = styled(Content)`
  background: #f5f6f8;
  border-top: 1px solid #e4e4e4;
  /* border-radius: 2px 2px 0 0; */
  padding: 12px;
  margin: 11px -12px -12px -12px;
  .title{
    font-weight: 600;
    font-size: 13px;
    color: rgba(53, 66, 94, .7);
    line-height: 28px;
    &::before{
      content: '';
      display: inline-block;
      width: 4px;
      height: 6px;
      background: url(${icon_circle_black}) no-repeat top center /4px 6px;
      margin-right: 8px;
      vertical-align: middle;
    }
  }
  p{
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 13px;
    color: #35425E;
    /* color: rgba(54, 65, 94, .7); */
    line-height: 28px;
    margin: 0;
    em{
      color: #E64A00;
      font-style: normal;
      font-weight: 600;
      /* &::before{
        content: '';
        display: inline-block;
        width: 1em;
        
      } */
    }
  }
`;
